<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人主页头部</title>
</head>
<body>
    <div th:fragment="headerProfile" class="container">
    <div class="row">
        <div class="col col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="ui-block">
<!--                <p th:text="${user.userId}"></p>-->
                <!--   自己查看自己的个人主页
                session.user.getUserId() 表示当前用户
                user.userId 表示查看的个人主页的用户
                 -->
                <div th:if="${user.userId} == ${session.user.getUserId()}" class="top-header">
                    <!--默认个人主页头部背景-->
                    <div class="top-header-thumb">
                        <img th:src="@{/img/top-header1.jpg}" alt="nature">
                    </div>
                    <div class="profile-section">
                        <div class="row">
                            <div class="col col-lg-5 col-md-5 col-sm-12 col-12">
                                <ul class="profile-menu">
                                    <li>
                                        <a href="06-ProfilePage-Friends.html"
                                        th:href="@{/friend/findByUserId(userId=${session.user.getUserId()})}">好友</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="col col-lg-5 ml-auto col-md-5 col-sm-12 col-12">
                                <ul class="profile-menu">
                                    <li>
                                        <a href="07-ProfilePage-Photos.html"
                                        th:href="@{/photo/findByUserId(userId=${session.user.getUserId()})}">相册</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="top-header-author">
                        <!--数据：用户头像、用户昵称-->
                        <a href="02-ProfilePage.html" th:href="@{'/profilePage?userId='+${session.user.getUserId()}}"
                           class="author-thumb">
                            <img style="width: 124px;height: 124px;" th:src="@{${session.user.getHeadPhoto()}}" alt="author">
                        </a>
                        <div class="author-content">
                            <a href="02-ProfilePage.html" th:href="@{'/profilePage?userId='+${session.user.getUserId()}}"
                               class="h4 author-name"
                               th:text="${session.user.getUname()}">James Spiegel</a>
                        </div>
                    </div>
                </div>

                <!--   自己查看他人的个人主页   -->
                <div th:if="${user.userId} != ${session.user.getUserId()}" class="top-header">
                    <!--默认个人主页头部背景-->
                    <div class="top-header-thumb">
                        <img th:src="@{/img/top-header1.jpg}" alt="nature">
                    </div>
                    <div class="profile-section">
                        <div class="row">
                            <div class="col col-lg-5 col-md-5 col-sm-12 col-12">
                                <ul class="profile-menu">
                                    <li>
                                        <a href="06-ProfilePage-Friends.html"
                                           th:href="@{/login}">好友</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="col col-lg-5 ml-auto col-md-5 col-sm-12 col-12">
                                <ul class="profile-menu">
                                    <li>
                                        <a href="07-ProfilePage-Photos.html"
                                           th:href="@{/login}">相册</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="control-block-button">
                            <!--事件：发送好友请求/button-->
                            <form th:action="@{/friendAsk/saveFriendAsk}" th:method="get">
                                <input type="hidden" name="senderId" value="" th:value="${session.user.getUserId()}" />
                                <input type="hidden" name="receiverId" value="" th:value="${user.userId}" />
                                <button class="accept-request bg-blue" title="加为好友" type="submit">
                                    <svg class="olymp-happy-face-icon">
                                        <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-happy-face-icon"
                                             th:href="@{/svg-icons/sprites/icons.svg#olymp-happy-face-icon}"></use>
                                    </svg>
                                </button>
                            </form>
                            <!--事件：建立私信页面/button-->
                            <form th:action="@{/chat/{fid}/friend(fid=${user.userId})}" th:method="post">
                                <input type="hidden" name="senderId" value="" th:value="${session.user.getUserId()}" />
                                <input type="hidden" name="receiverId" value="" th:value="${user.userId}" />
                                <button class="accept-request bg-purple" title="私信" type="submit">
                                    <svg class="olymp-chat---messages-icon">
                                        <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-chat---messages-icon"
                                             th:href="@{/svg-icons/sprites/icons.svg#olymp-chat---messages-icon}"></use>
                                    </svg>
                                </button>
                            </form>
                        </div>
                    </div>
                    <div class="top-header-author">
                        <!--数据：用户头像、用户昵称-->
                        <a href="02-ProfilePage.html" th:href="@{'/profilePage?userId='+${user.userId}}"
                           class="author-thumb">
                            <img style="width: 124px;height: 124px;" th:src="@{'/img/'+${user.headPhoto}}" alt="author">
                        </a>
                        <div class="author-content">
                            <a href="02-ProfilePage.html" th:href="@{'/profilePage?userId='+${user.userId}}"
                               class="h4 author-name"
                               th:text="${user.uname}">James Spiegel</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>